<template>
	<view class="myClient">
		<view class="tab_nav">
			<nav-bar
				nav_btn="back"
				:index="index"
				:title="title"
				@onPicker="onPicker"
				:showPicker="showPicker"
				:color="color"
				:placeholder="placeholder"
				:list="shopList"
				:auto_img="image"
				:background="background"
			></nav-bar>
		</view>
		<view class="head_active_box flex">
			<view :class="['left_box']" v-for="(item, index) in activeList" :key="index" @click="active(index)">
				<view :class="[activeListIndex == index ? 'active_txt' : 'txt', 'txtali']">
					{{ item.name }}
				</view>
				<view class="bottom_line" v-if="activeListIndex == index">
					<image class="w100 h100" src="../../filePages/static/line.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="customer_list">
			<view class="customer_box" v-for="(item, index) in list" :key="index" @click="clientDetail(item.id)">
				<view class="c_user_info_box flex" v-for="(items, indexs) in item.custom" :key="indexs">
					<view class="flex" style="align-items: center">
						<view class="user_name_box">
							<image class="w100 h100" src="../static/name.png" mode=""></image>
						</view>
						<view class="user_name_txt s26 family f500">
							{{ items.username }}
						</view>
					</view>
					<view class="flex" style="align-items: center">
						<view class="user_phone_box">
							<image class="w100 h100" src="../static/phone.png" mode=""></image>
						</view>
						<view class="user_name_txt s26 family f500" @click.stop="callPhone(items.mobile)">
							{{ items.mobile }}
						</view>
					</view>
				</view>
				<view class="detail_box flex">
					<view class="list_box flex">
						<view class="left_txt s26 family f500">生效时间</view>
						<view class="right_txt s26 family f500">
							{{ get_date(item.createtime) }}
						</view>
					</view>
					<view class="list_box flex">
						<view class="left_txt s26 family f500">派单时间</view>
						<view class="right_txt s26 family f500" style="color: #ebbe87">
							{{ get_datem(item.updatetime) }}
						</view>
					</view>
					<view class="list_box flex">
						<view class="left_txt s26 family f500">生效审核</view>
						<view class="right_txt s26 family f500">人工审核</view>
					</view>
				</view>
				<view class="detail_box flex" style="margin-top: 0">
					<view class="list_box flex" style="width: unset; overflow: unset; text-overflow: unset; white-space: unset">
						<view class="left_txt s26 family f500">意向产品</view>
						<view class="right_txt s26 family f500" style="word-wrap: break-word; flex: 1">
							{{ item.products || '' }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="s30 family fblod txtali" style="margin-top: 60%" v-if="list.length == 0">暂无数据！</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			image: '../static/tab_jian.png',
			color: 'black',
			showPicker: true,
			background: '#ffffff',
			activeList: [
				{
					name: '跟进中'
				},
				{
					name: '已成交'
				},
				{
					name: '无效单'
				},
				{
					name: '已跑单'
				}
			],
			activeListIndex: 0,
			list: [],
			shopList: [],
			index: 0,
			isJob: 0
		};
	},
	onLoad(options) {
		let obj = JSON.parse(options.obj);
		this.shopId = obj.shopId;
		this.index = obj.index;
		if (obj.isJob == 1) {
			this.isJob = obj.isJob;
		}
		this.getShopList();
	},
	onShow() {
		this.getData();
	},
	methods: {
		getData() {
			let that = this;
			uni.showLoading({
				title: '加载中...'
			});
			this.$request({
				url: 'manage/getMyCustom',
				data: {
					status: that.activeListIndex == 1 ? 3 : that.activeListIndex == 2 ? 5 : that.activeListIndex == 3 ? 4 : 1,
					shop_id: this.shopId,
					dispatch_id: this.isJob == 0 ? 0 : uni.getStorageSync('userInfo').id
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					data.map((item) => {
						item.custom.map((key) => {
							key.mobile = key?.mobile?.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
						});
					});
					that.list = data;
					uni.hideLoading();
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
			});
		},
		clientDetail(id) {
			uni.navigateTo({
				url: '/pages/filePages/distributeLeaflets/distributeLeaflets_detail?id=' + id
			});
		},
		active(ind) {
			this.activeListIndex = ind;
			this.getData();
		},
		callPhone(data) {
			if (data) {
				uni.makePhoneCall({
					phoneNumber: data
				});
			}
		},
		//获取店铺列表
		getShopList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: '',
					type: 1
				}
			}).then((res) => {
				this.shopList = res.data.data;
			});
		},
		// 选择店铺
		onPicker(e) {
			this.shopId = this.shopList[e].id;
			this.index = e;
			this.getData();
		}
	}
};
</script>

<style scoped lang="scss">
.myClient {
	overflow: hidden;
	.customer_list {
		padding: 0 32rpx;
	}
	.customer_box {
		width: 100%;
		background: #fff;
		border-radius: 8upx;
		margin: 20upx auto;
		overflow: hidden;
		box-sizing: border-box;
		padding: 40upx 32upx 20upx;

		.customer_txt {
			margin-left: 40upx;
			margin-top: 28upx;
			color: #e4b77f;
		}

		.c_user_info_box {
			width: 100%;
			height: 70upx;
			background: #fafafa;
			border-radius: 4upx;
			align-items: center;
			justify-content: space-between;

			.user_name_box {
				width: 32upx;
				height: 32upx;
				border-radius: 50%;
			}

			.user_name_txt {
				color: #666;
				line-height: 70upx;
				margin-left: 20upx;
			}

			.user_phone_box {
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
			}
		}

		.c_user_info_box:nth-child(2) {
			margin-top: 32upx;
		}

		.detail_box {
			margin-top: 32upx;
			flex-wrap: wrap;

			.list_box {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 26upx;
				&:nth-of-type(2) {
					margin-left: 28upx;
				}
				.left_txt {
					width: 104upx;
					color: #999;
				}

				.right_txt {
					color: #333;
					margin-left: 16upx;
				}
			}
		}
	}

	.head_active_box {
		overflow: hidden;

		.left_box {
			width: 100%;
			height: 100upx;
			background-color: #fff;
			line-height: 100upx;

			.active_txt {
				font-weight: bold;
				color: #000;
			}

			.txt {
				font-weight: 500;
				color: #666;
			}

			.bottom_line {
				width: 52upx;
				height: 10upx;
				margin: 0 auto;
				margin-top: -70upx;
			}
		}
	}
}

.tab_nav {
	background-color: #fff;
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>
